<template>
    <div class="wx-camera">
        <button @click="chooseImage" class="btn">调用相机/相册</button>
        <div v-if="imgList.length" class="img-preview">
            <img v-for="(img, index) in imgList" :key="index" :src="img" alt="预览图" class="preview-img">
        </div>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'

export default {
    data() {
        return {
            wxConfig: {},
            imgList: [], // 存储图片路径
        }
    },
    mounted() {
        // 初始化微信JS-SDK
        this.init()

    },
    methods: {
        init() {
            getConfigKey('wx.appId').then(response => {
                this.appId = response.msg ? response.msg : ""
                if (!this.appId || this.appId == '') {
                    this.$message.error('未配置微信AppID，请在系统配置中设置wx.appId')
                    return
                }
                // console.log("this.appId", this.appId)
                const url = window.location.href.split('#')[0];
                getWxSign({ url: url }).then(res => {
                    console.log("res", res.data);
                    this.wxConfig = res.data
                    // 配置微信SDK
                    wx.config({
                        debug: false,
                        appId: this.appId, // 必填，公众号的唯一标识
                        timestamp: this.wxConfig.timestamp, // 必填，生成签名的时间戳
                        nonceStr: this.wxConfig.nonceStr, // 必填，生成签名的随机串
                        signature: this.wxConfig.signature, // 必填，签名
                        jsApiList: ['chooseImage', 'getLocalImgData'] // 需要使用的接口
                    })
                    wx.ready(() => {
                        console.log('微信SDK初始化成功')
                    })
                    wx.error(err => {
                        console.error('微信SDK配置失败:', err)
                    })
                })
            });
        },
        // 调用微信相机/相册接口
        chooseImage() {
            wx.chooseImage({
                count: 1, // 最多选择1张图片
                sizeType: ['original', 'compressed'], // 原图/压缩图
                sourceType: ['camera', 'album'], // 可指定来源：相机/相册（优先相机）
                success: res => {
                    // 微信返回的临时图片路径（本地ID）
                    const localIds = res.localIds
                    // 处理图片路径（安卓需特殊处理）
                    this.handleLocalImg(localIds[0])
                },
                fail: err => {
                    console.error('调用相机失败:', err)
                    alert('请允许微信访问相机权限')
                }
            })
        },

        // 处理本地图片路径（兼容安卓）
        handleLocalImg(localId) {
            // 安卓微信需要通过 getLocalImgData 转换路径
            if (wx.getLocalImgData) {
                wx.getLocalImgData({
                    localId: localId,
                    success: res => {
                        // 安卓返回的是 base64 字符串，需拼接前缀
                        const base64Data = res.localData
                        const imgUrl = base64Data.indexOf('base64,') === -1
                            ? `data:image/jpeg;base64,${base64Data}`
                            : base64Data
                        this.imgList = [imgUrl]
                    }
                })
            } else {
                // iOS 直接使用 localId 作为图片路径
                this.imgList = [localId]
            }
        }
    }
}
</script>

<style scoped>
.btn {
    padding: 12px 24px;
    background: #07c160;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.img-preview {
    margin-top: 20px;
}

.preview-img {
    max-width: 100%;
    border-radius: 8px;
}
</style>